<template>
  <div>





    <el-card v-if="Allpost" style="margin: 0 auto" class="background">
      <div v-for="(item,index) in Allpost.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index" style="margin-left: 10px">
          <div  class="message" id="a2">
            <div><strong id="a3" style="font-size: 18px; color: #1b1f23">{{item.post_title}}</strong></div>
            <div style="display: flex;margin-top: 10px">
              <div v-if="item.articleTitle!=null"><img :src='item.img' class="img"></div>
              <div v-if="item.articleTitle==null" style="height: 50px;width: 100%"></div>
              <div style="margin-left: 20px;position: relative;">
                <div class="textOVerThree "> <router-link class="article-link" :to="{path:'/postDetail',query:{id: item.id}}"><a style="cursor: pointer;">{{item.articleContentMd}}</a></router-link></div>
                <div style="bottom: 0;position: absolute;font-size: 14px;">
                  <a>{{item.create_time}}</a>
<!--                  <a>{{new Date(item.create_time).getFullYear()}}-{{new Date(item.create_time).getMonth()+1}}-{{new Date(item.create_time).getDay()}} {{new Date(item.create_time).getHours()}}:{{new Date(item.create_time).getMinutes()}}:{{new Date(item.create_time).getMilliseconds()}}</a>-->
<!--                  <i class="el-icon-view" style="color: #1b1f23"></i><span style="color: #1b1f23">{{item.view_counts}}人浏览</span>-->
<!--                  <img  src="../assets/img/2.png" width="20px" height="20px" class="a1"> <a style="color: #1b1f23">{{item.up_counts}}赞</a>-->
                       <a class="hover" @click="deletePost(item.post_title)"><i class="el-icon-delete" style="margin-left: 20px;cursor: pointer"></i><a style="cursor: pointer;">删除</a></a>
                </div>
              </div>


            </div>
          </div>
      </div>

      <el-pagination align='center'
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[1,3,5,10,20]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="Allpost.length">

      </el-pagination>
    </el-card>
    <el-empty :image-size="300" v-else style="height: 100%;margin: 0 auto"></el-empty>
    </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'PostManager',
  data(){
    return{
      Posts:[],
      currentPage:1,
      totalCount:0,
      pageSize:10,
      user_id:'',
      Allpost:'',
      post_title:'',
    }
  },
  methods:{
    Nindex(index) {
      const page = this.currentPage // 当前页码
      const pagesize = this.pageSize // 每页条数
      return index  +1+ (page - 1) * pagesize
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    selectPostsByAuthor(){
        this.$http.post('http://localhost:8888/Post/findPostByAuthorL',
          {"author_id": this.author_id},
          {emulateJSON: true}
        ).then(function (res) {
            if (res.data.code == 200) {
              this.Posts = res.data.data;
              console.log(this.Posts.create_time)
            } else {
            }
          }
        )
    },
    deletePost(a){
      this.$confirm('是否确认删除该帖子?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.post_title =a;
        this.$http.post('http://localhost:8888/Post/deletemypost/'+this.post_title,
          {emulateJSON: true}
        ).then(function (res) {
          if (res.data.code == 200) {
            alert(res.data.msg);
          }
        })
        this.$router.go(0);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    findAllPost(){
      this.user_id=JSON.parse(localStorage.getItem("users")).id,
      this.$http.post('http://localhost:8888/Post/selectmypost/'+this.user_id,
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code == 200) {
          this.Allpost= res.data.data;
        } else {
        }
      })
    },
},
  created() {
    this.findAllPost();
  }
}


</script>

<style scoped>
.message{
  width: 100%;
  height: 100%;
  min-height: 80px;
  border-bottom: 1px solid #6e91e3;
  margin-top: 10px;
  padding: 10px 0 10px 0;
}

.img{
  width: 100px;
  height: 80px;
}

.textOVerThree {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap:break-word;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  width: 65vw;
}



.img1{
  width:40px;
  height: 40px;
  border-radius: 50%;
}

.hover:hover{
  color: #409EFF;
}

.background{
  width: 100%;
  height: 100%;
  background: url(../assets/img/bk5.jpg) ;
  background-size: 100%;
}



</style>
